import React,{useState,useEffect,useRef} from "react";
import {  ScrollView,Text,View,Pressable,Image,FlatList,ActivityIndicator,RefreshControl} from 'react-native';
import Headers from '@/app/components/header/Headers';
import { useTranslation } from '@/app/utils/useTranslation';
import { styles } from "./style/styles";
import {size} from '@/app/utils';
import {getNoticeList} from './serve'
import Nodata from '@/app/components/Nodata'

interface NoticeItem {
    id?: string | number;
    title?: string;
    createTime?: string;
}

interface TabItem {
    id: number;
    name: string;
}
const NoticeScreen = (props:any) => {
    const { t } = useTranslation();
    let [total,setTotal] = useState(0);
    let [type,setType] = useState(0);
    let [page,setPage] = useState(1);
    let [loading,setLoading] = useState(true);
    let [refreshing,setRefreshing] = useState(false);
    let [noticeList,setNoticeList] = useState<NoticeItem[]>([{},{},{},{},{},{},{},{},{},{},{},{}]);
    let [tabMenuIndex,setTabMenuIndex] = useState(0);
    let [tabList,setTabList] = useState<TabItem[]>([
        {
            id:0,
            name:t('t152'),
        },
        {
            id:1,
            name:t('t873'),
        },
        {
            id:2,
            name:t('t874'),
        },
        {
            id:3,
            name:t('t875'),
        },
        {
            id:4,
            name:t('t876'),
        }
    ]);

    function onTabMenuChange(data:number){
        console.log(data)
        if(data==tabMenuIndex){
            return false;
        }
        setNoticeList([{},{},{},{},{},{},{},{},{},{},{},{}]);
        setLoading(true);
        setPage(1);
        setTabMenuIndex(data);
        setType(data);
    }

    useEffect(()=>{
        getNoticeListInit();
    },[page,type])

    const getNoticeListInit=()=>{
        let params={
            page:page,
            limit:10,
            type:type
        }
        console.log('params-:',params)
        getNoticeList(params).then(res=>{
            let data = res.data||{};
            let list: NoticeItem[] = [];
            let dataList: NoticeItem[] = data.data||[];
            if(page==1){
                list = [...dataList]
            }else{
                list = [...noticeList,...dataList]
            }
            setTotal(data.total)
            setRefreshing(false);
            setNoticeList(list)
            setLoading(false);
        }).catch(()=>{
            setRefreshing(false);
        })
    }

    const renderFooter = () => {
        if (noticeList.length===total){
            if(noticeList.length===total && noticeList.length>0){
                return (
                    <View style={{paddingTop:20,paddingBottom:15}}>
                        <Text style={{color:'#ccc',fontSize:14,textAlign:'center',}}>数据加载完毕</Text>
                    </View>
                )
            }else{
                return null;
            }
        }else{
            if(loading){
                return null;
            }
            return (
                <View
                    style={{
                        paddingVertical: 20,
                        borderTopWidth: 1,
                        borderColor: "#f9f9f9"
                    }}
                >
                    <ActivityIndicator animating color={'#38B781'} size="large" />
                </View>
            );
        }
    };

    const handleLoadMore=()=>{
        if (loading || refreshing) {
            return false;
        }
        if(noticeList.length<10){
            return false
        }else{
            if (noticeList.length!==total){
                setPage(page+1);
                getNoticeListInit();
            }
        }
    };

    const handleRefresh=()=>{
        setPage(1);
        setRefreshing(true);
        getNoticeListInit();
    };

    return(
        <View style={{ flex: 1,flexDirection:'column',backgroundColor:'#fff'}}>
            <Headers
                title={t('t310')}
                border={false}
                barStyle={0}
                leftIcon={require('@/assets/images/icon/back.png')}
                rightIcon={require('@/assets/images/home/2.png')}
                leftTitle={''}
                backgroundColor={`rgba(255,255,255,1)`}
                centerColor={'#666'}
                {...props}
            />
             <View style={{height:size(32),paddingBottom:size(10)}}>
                <ScrollView horizontal={true} style={[styles.tabmenubox]} showsHorizontalScrollIndicator={false}>
                    {tabList.map((item,index)=>{
                        return (<Pressable key={index} onPress={()=>{
                            onTabMenuChange(item.id);
                                }} style={[tabMenuIndex+''==index+''?styles.tabMenuItembox:styles.tabMenuNoItembox,{marginLeft:index==0?size(16):size(14),marginRight:(index==tabList.length-1)?size(16):size(0)}]}>
                                <Text style={[styles.tabItemtextbox,tabMenuIndex+''==index+''?styles.tabItemtextboxactive:null]}>{item.name}</Text>
                            </Pressable>
                        )
                    })}
                </ScrollView>
            </View>
            <View style={{flex: 1,}}>
                <FlatList
                    style={{paddingLeft:size(16),paddingRight:size(16)}}
                    keyExtractor={(item, index) => index.toString()}
                    data={noticeList}
                    renderItem={({ item }) => {
                        if(loading){
                            return <Pressable style={styles.listItem}>
                                <View style={{flex:1,marginRight:size(20)}}>
                                    <View style={{backgroundColor:'#f9f9f9',width:"70%",height:size(20)}}>

                                    </View>
                                    <View style={[styles.listItemDesc,{backgroundColor:'#f9f9f9',width:"50%",height:size(20)}]}>

                                    </View>
                                </View>
                                <View style={[styles.noticeboxrightimg,{backgroundColor:'#f9f9f9'}]}>

                                </View>
                            </Pressable>
                        }else{
                            return <Pressable onPress={()=>{
                                props.navigation.navigate('pages/Notice/NoticeDeatilScreen',{id:item.id,title:item.title})
                            }} style={styles.listItem}>
                                <View style={{flex:1,marginRight:size(20)}}>
                                    <Text numberOfLines={1} style={styles.listItemTitle}>{item.title?item.title:'--'}</Text>
                                    <Text style={styles.listItemDesc}>{item.createTime?item.createTime:'--'}</Text>
                                </View>
                                <Image
                                    style={styles.noticeboxrightimg}
                                    source={
                                        require('@/assets/images/right.png')
                                    }
                                />
                            </Pressable>
                        }
                    }}
                    ListFooterComponent={renderFooter}
                    ListEmptyComponent={()=>{
                        console.log('-----------ListEmptyComponent--------------')
                        return (
                            <View style={{paddingTop:size(60)}}>
                                <Nodata></Nodata>
                            </View>
                        )
                    }}
                    refreshControl={
                        <RefreshControl
                            refreshing={refreshing}
                            onRefresh={handleRefresh}
                            colors={['#38B781']} // Android
                            tintColor="#38B781" // iOS
                        />
                    }
                    onEndReached={handleLoadMore}
                    onEndReachedThreshold={0.5}
                />
            </View>
        </View>
    )
}

export default NoticeScreen